<template>
	<view class="tab-bar">
		<view class="tab-item" v-for="(item,index) in data" :key="index" :class="{active: current == index}" @tap='goPage(item)'>
			<view>
				<image :src="item.iconPath" v-if="current != item.id" mode=""  class="imgIcon" :class="{big:item.big}"></image>
				<image :src="item.selectedIconPath"  v-if="current == item.id" mode="" :class="{big:item.big}" class="imgIcon"></image>
			</view>
			<view class="text" v-if="item.text"  :style="{color:( item.id == current ? item.color:'#8e8c8c')}">{{item.text}}</view>
		</view>
	</view>
</template>
<script>
	    import mixin from "@/util/mixin.js";
		export default {
			mixins:[mixin],
			props:['current'],
			data() { 
				return {
					data: [
						{
							iconPath: '../../static/img/home.png',
							selectedIconPath: '../../static/img/homeS.png',
							pagePath: '/pages/index/index',
							text: '预售选书',
							color:'#498BF2',
							id:1
						},
						{
							iconPath: '../../static/img/my.png',
							selectedIconPath: '../../static/img/myS.png',
							pagePath: '/pages/my/my',
							id:2,
							text: '我的',
							color:'#498BF2'
						}
                    ]
				}
			},
		
			methods: {
				goPage(item) {
				  if(String(this.current) != String(item.id))
					{
						// console.log(this.$router);
						// // this.$route.push(tem.pagePath);
						this.$Router.replace(item.pagePath)
						// uni.reLaunch({
						// 	url:item.pagePath
						// })
					}	
				}
			}
		}
</script>
<style lang="scss">
	.tab-bar {
		position: fixed;
		width: 100vw;
		bottom: -2rpx;
		background-color: #fff;
		border-top: 1px solid #f2f2f2;
		z-index: 9;
		display: flex;
		.tab-item {
			padding-top: 25rpx;
			height: 140rpx;
			flex:1;
			text-align: center;
		}
		.imgIcon {
			width: 46rpx;
			height: 46rpx;
			&.big {
				width: 96rpx;
				height: 90rpx;
			}
		}
		.text {
			color:#8e8c8c;
			font-size: 24rpx;
		}
	}
</style>